<template>
  <div class="warp fields">
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50" />

      <el-table-column prop="name" label="标识" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="页面描述" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="name" label="更新时间" align="center">
      </el-table-column>
      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-view"
            @click="handlePreview(scope.row)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEditTable(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >

          <el-button
            type="text"
            size="small"
            icon="el-icon-download"
            @click="handleGenTable(scope.row)"
            >生成代码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    // 预览
    handlePreview() {},
    // 编辑
    handleEditTable() {
         this.$router.push({ name: "FieldsEdit" });
    },
    // 删除
    handleDelete() {},
    // 生成代码
    handleGenTable() {},
    // 导入
    openImportTable() {},
    // 批量删除
    // handleDelete() {},
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.tableId);
      this.tableNames = selection.map((item) => item.tableName);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  },
};
</script>

<style lang="scss" scoped>
 
</style>